<script setup>
import { judgeShowImage, returnStatusColor } from '@/utils/index'
import { getDictDetail, dictMap } from '@/service/dict'
import { useDictStore } from '@/store/dict'

const { activityState } = useDictStore().dictData

const props = defineProps({
  info: {
    type: Object,
    default: () => {},
  },
  imgSrc: {
    type: String,
    default: '',
  },
  title: {
    type: String,
    default: '',
  },
  descList: {
    type: Array,
    default: () => [],
  },
  needBorder: {
    type: Boolean,
    default: false,
  },
  showBadge: {
    type: Boolean,
    default: false,
  },
})

const realActivityState = ref([])
const getDict = async () => {
  const { code, result } = await getDictDetail(dictMap.activityState)
  if (code === 200 && result) {
    realActivityState.value = result
  }
}

onMounted(() => {
  if (!activityState) {
    getDict()
  } else {
    realActivityState.value = activityState
  }
})

const emits = defineEmits(['customClick'])

const handleClick = () => {
  emits('customClick')
}

const statusBackgroundColor = computed(() => {
  return {
    'background-color': returnStatusColor(
      props.info.status,
      realActivityState.value,
    ),
  }
})
</script>

<template>
  <view
    class="common-activity-item"
    :class="{ 'is-border': needBorder }"
    @click="handleClick"
  >
    <view class="item-img">
      <image
        class="w-full h-full"
        :src="judgeShowImage(imgSrc)"
        mode="aspectFill"
      ></image>
      <view
        v-if="showBadge"
        class="item-img-badge"
        :style="statusBackgroundColor"
      >
        {{ info.status_dictText }}
      </view>
    </view>
    <view class="flex flex-col justify-between py-2rpx">
      <view class="item-title ellipsis-2">{{ title }}</view>
      <view>
        <view
          v-for="(item, index) in descList"
          :key="index"
          class="item-desc ellipsis"
        >
          {{ item.label }}：{{ item.value }}
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.common-activity-item {
  display: flex;
  align-items: stretch;
  padding: 32rpx 0;

  &.is-border {
    border-bottom: 1rpx solid $uni-border-color;
  }

  .item-img {
    flex-shrink: 0;
    position: relative;
    width: 200rpx;
    height: 160rpx;
    margin-right: 24rpx;
    overflow: hidden;
    border-radius: 16rpx;
    overflow: hidden;

    &-badge {
      position: absolute;
      top: 0;
      right: 0;
      width: 88rpx;
      height: 36rpx;
      text-align: center;
      line-height: 36rpx;
      font-size: 24rpx;
      color: #fff;
      border-radius: 0 8rpx 0 8rpx;
    }
  }

  .item-title {
    font-size: 28rpx;
    font-weight: 500;
    color: $uni-text-color;
  }

  .item-desc {
    margin-bottom: 8rpx;
    font-size: 24rpx;
    color: $uni-text-color-grey;

    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
